<template>
  <div class="pub-tab">
    <el-tabs v-model="activeName" v-bind="$attrs" @tab-click="changeTab">
      <el-tab-pane v-for="item in tabs" :key="item.name" :name="item.name" :label="item.label">
        <slot :name="item.name"></slot>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script setup lang="ts">
import { ref, watch } from 'vue';
import { TabsPaneContext } from "element-plus";
interface TabProps {
  label: string;
  name: string;
}
interface TabListProps {
  tabs: TabProps[];
  active: string;
}
const props = withDefaults(defineProps<TabListProps>(), {
  tabs: () => [],
  active: "",
});
const emit = defineEmits(["tabChange"]);
let activeName = ref(props.active || props.tabs[0].name);

const changeTab = (pane: TabsPaneContext) => {
  activeName.value = pane.paneName as string;
  emit("tabChange", activeName.value);
};

watch(
  () => props.active,
  val => {
    activeName.value = val;
  }
);
</script>
